<template>
  <div class="wap-container">
    <!-- 店铺台头 -->
    <wap-store-head></wap-store-head>
    <!-- 店铺导航 -->
    <wap-nav></wap-nav>
    <div>
      <div v-for="(floor, index) in floorList" :key="index">
        <!-- 楼层广告 带标题 -->
        <div v-if="floor.floorType === 'adv1f'">
          <wap-adv1 :adv="floor" @add="addNewFloorByForm"></wap-adv1>
        </div>
        <!-- 楼层广告 广告小图 -->
        <div v-if="floor.floorType === 'adv2f'">
          <wap-customization-small :adv="floor" @add="addNewFloorByForm"></wap-customization-small>
        </div>
        <!-- 楼层广告 广告大图 -->
        <div v-if="floor.floorType === 'adv3f'">
          <wap-customization :adv="floor" @add="addNewFloorByForm"></wap-customization>
        </div>
        <!-- 楼层广告 带标题 -->
        <div v-if="floor.floorType === 'adv4f'">
          <wap-adv2 :adv="floor" @add="addNewFloorByForm"></wap-adv2>
        </div>
        <!-- 热门精选 -->
        <div v-if="floor.floorType === 'adv5f'">
          <wap-hot :goods="floor" @add="addNewFloorByForm"></wap-hot>
        </div>
      </div>
    </div>

    <!-- 判断楼层是否已装修，若没有，则展示空楼层 -->
    <div v-if="floorList.length != 5 && Object.keys(adv1f).length == 0">
      <wap-adv1 :adv="adv1f" @add="addNewFloorByForm"></wap-adv1>
    </div>
    <div v-if="floorList.length != 5 && Object.keys(adv2f).length == 0">
      <wap-customization-small :adv="adv2f" @add="addNewFloorByForm"></wap-customization-small>
    </div>
    <div v-if="floorList.length != 5 && Object.keys(adv3f).length == 0">
      <wap-customization :adv="adv3f" @add="addNewFloorByForm"></wap-customization>
    </div>
    <div v-if="floorList.length != 5 && Object.keys(adv4f).length == 0">
      <wap-adv2 :adv="adv4f" @add="addNewFloorByForm"></wap-adv2>
    </div>
    <div v-if="floorList.length != 5 && Object.keys(adv5f).length == 0">
      <wap-hot :goods="adv5f" @add="addNewFloorByForm"></wap-hot>
    </div>

  </div>
</template>

<script>
  import StoreHead from './storeHead'
  import Nav from './nav'
  import adv1 from './advTitle1'
  import adv2 from './advTitle2'
  import Customization from './customization'
  import CustomizationSmall from './customizationSmall'
  import Hot from './hot'

  // 获取接口操作对象
  import { apiAdornWAP } from '../../../common/api'

  export default {
    data() {
      return {
        floorList: [], // 全部楼层数据
        // 楼层广告数据
        adv1f: {},

        // 楼层广告数据
        adv2f: {},

        // 大图广告
        adv3f: {},

        // 4楼 商品分类
        adv4f: {},

        // 5楼 热门精选
        adv5f: {}
      }
    },
    components: {
      'wap-nav': Nav,
      'wap-store-head': StoreHead,
      'wap-customization': Customization,
      'wap-hot': Hot,
      'wap-customization-small': CustomizationSmall,
      'wap-adv1': adv1,
      'wap-adv2': adv2
    },
    created() {
      this.handlerFloorList()
    },
    methods: {
      /**
       * 获取楼层列表
       */
      handlerFloorList() {
        // 初始化轮播图
        this.bannerInfo = {}

        // 初始化导航
        this.goodsNav = []

        // 初始化模板列表
        this.hotGoods = {}

        apiAdornWAP.getFloorList('WAP', this.$store.getters.token).then((data) => {
          // 如果获取的楼层列表为空
          if (!data.list || data.list.length == 0) {
            return
          }
          this.floorList = data.list
          // 将获取的数据分发
          data.list.forEach((v) => {
            // 如果当前是1楼广告
            if (v.floorType == 'adv1f') {
              this.adv1f = v
            }

            // 广告位（小图）
            if (v.floorType == 'adv2f') {
              this.adv2f = v
            }

            // 广告位（大图）
            if (v.floorType == 'adv3f') {
              this.adv3f = v
            }

            // 如果当前是2楼广告
            if (v.floorType == 'adv4f') {
              this.adv4f = v
            }

            // 如果当前是尾单清仓
            if (v.floorType == 'adv5f') {
              this.adv5f = v
            }
          })
        })
      },

      /**
       * 新增新楼层
       * @param { Object } params 参数
       */
      addNewFloorByForm(callback) {
        // 提交表单
        $('form').ajaxSubmit((data) => {
          // 如果token失效
          if (data.code == '314') {
            this.$toast('用户登录信息失效，请登录', () => {
              this.$router.push('/login')
            })
            return
          }

          // 如果参数失效
          if (data.code == 201) {
            if (data.msg == '缺少参数floorPhotoId') {
              this.$toast('上传的图片已经失效，请重新上传')
              return
            }
          }

          // 如果新增失败，则弹框提示
          if (data.code != 200) {
            this.$toast(data.msg)
            return
          }

          // 刷新数据
          this.handlerFloorList()

          // 如果有回调方法，则执行回调方法
          if (typeof callback == 'function') {
            callback()
          }
        })
      },

      /**
       * 删除楼层
       *
       * @params { Object } params 参数
       */
      deleteFloor(params) {
        apiAdornWAP.deleteFloor(params.id, this.$store.getters.token, 'WAP').then((data) => {
          // 请求数据
          this.handlerFloorList()

          // 如果有回调，则执行回调方法
          if (typeof params.callback == 'function') {
            params.callback()
          }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .wap-container {
    padding-top: 112px;
    width: 750px;
    margin: 0 auto;
  }
</style>